<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料</title>
    <link href="static/vendor/element-ui@2.15.9/lib/theme-chalk/index.css" rel="stylesheet" />
    <link href="static/eladmin/css/eladmin.min.css" rel="stylesheet" />
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 120px;
            height: 120px;
            line-height: 120px;
            text-align: center;
        }

        .avatar {
            width: 120px;
            height: 120px;
            display: block;
        }
    </style>
</head>

<body>
    <div id="app" class="list-page dark-theme" v-cloak>
        <div class="d-flex p-4">
            <aside>
                <el-card class="box-card" style="width:500px;">
                    <div slot="header" class="clearfix">
                        <span>个人资料</span>
                    </div>
                    <el-upload class="avatar-uploader" :action="apiRoute.upload" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="dataOfUserInfo.data.avatar" :src="dataOfUserInfo.data.avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                    <el-descriptions class="margin-top" :column="1">
                        <el-descriptions-item label="用户名">{{dataOfUserInfo.data.user_name}}</el-descriptions-item>
                        <el-descriptions-item label="手机号">{{dataOfUserInfo.data.mobile || '--'}}</el-descriptions-item>
                        <el-descriptions-item label="用户邮箱">{{dataOfUserInfo.data.email || '--'}}</el-descriptions-item>
                        <el-descriptions-item label="备注">
                            <el-tag size="small">宅男</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="登陆次数">{{dataOfUserInfo.data.login_count}}</el-descriptions-item>
                        <el-descriptions-item label="登陆日期">{{dataOfUserInfo.data.login_time}}</el-descriptions-item>
                        <el-descriptions-item label="创建日期">{{dataOfUserInfo.data.created_at}}</el-descriptions-item>
                    </el-descriptions>
                </el-card>

            </aside>
            <main class="flex-grow-1 ms-4">
                <el-card class="box-card">
                    <el-tabs v-model="activeTabName" @tab-click="handleClick">
                        <el-tab-pane label="基本资料" name="info">
                            <el-form ref="formOfInfo" :model="formOfInfo" :rules="rulesOfInfo" label-width="80px">
                                <el-form-item label="昵称" prop="nick_name">
                                    <el-input v-model="formOfInfo.nick_name"></el-input>
                                </el-form-item>
                                <el-form-item label="姓名" prop="contact_name">
                                    <el-input v-model="formOfInfo.contact_name"></el-input>
                                </el-form-item>
                                <el-form-item label="手机号" prop="mobile">
                                    <el-input v-model="formOfInfo.mobile"></el-input>
                                </el-form-item>
                                <el-form-item label="邮箱" prop="email">
                                    <el-input v-model="formOfInfo.email"></el-input>
                                </el-form-item>
                                <el-form-item label="性别" prop="gender_data">
                                    <el-select v-model="formOfInfo.gender" placeholder="请选择性别">
                                        <el-option :label="item" :value="idx"
                                            v-for="(item,idx) of dataOfUserInfo.gender_data" :key="idx"></el-option>
                                    </el-select>
                                </el-form-item>
                                <!-- <el-form-item label="生日" prop="birthday">
                                    <el-col :span="11">
                                        <el-date-picker type="date" placeholder="选择日期" v-model="formOfInfo.birthday"
                                            style="width: 100%;"></el-date-picker>
                                    </el-col>
                                </el-form-item> -->
                                <el-form-item>
                                    <el-button size="mini" type="primary" @click="onSubmit('formOfInfo')">保存</el-button>
                                    <el-button size="mini">关闭</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="修改密码" name="password">

                            <el-form ref="formOfPassword" :model="formOfPassword" :rules="rulesOfPassword"
                                label-width="80px">
                                <el-form-item label="旧密码" prop="old_password">
                                    <el-input v-model="formOfPassword.old_password" show-password></el-input>
                                </el-form-item>
                                <el-form-item label="新密码" prop="new_password">
                                    <el-input v-model="formOfPassword.new_password" show-password></el-input>
                                </el-form-item>
                                <el-form-item label="确认密码" prop="re_password">
                                    <el-input v-model="formOfPassword.re_password" show-password></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button size="mini" type="primary" @click="onSubmit('formOfPassword')">保存
                                    </el-button>
                                    <el-button size="mini">关闭</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </main>
        </div>
    </div>

    <script src="static/vendor/vue@2.6.14/dist/vue.min.js"></script>
    <script src="static/vendor/element-ui@2.15.9/lib/index.js"></script>
    <script src="static/vendor/axios@0.27.2/dist/axios.min.js"></script>
    <script src="static/vendor/mockjs@1.1.0/dist/mock.js?v=1.0.0"></script>
    <script src="static/js/utils.min.js"></script>
    <script src="static/mock/admin/api-route.js?v=1.0.0"></script>
    <script src="static/mock/admin/index.js?v=1.0.0"></script>
    <script src="static/eladmin/js/elcomponents.min.js"></script>
    <script>
        // 使用模拟数据
        useMockData();

        /**
         * 个人资料页面
         */
        const App = {
            el: '#app',
            name: "AuthAdminsIndex",
            data() {
                return {
                    activeTabName: 'info',
                    formOfInfo: {},
                    formOfPassword: {},
                    rulesOfInfo: {
                        nick_name: [
                            { max: 50, message: '长度不超过 50 个字符' }
                        ],
                        contact_name: [
                            { max: 50, message: '长度不超过 50 个字符' }
                        ],
                        email: [
                            { type: 'email', message: '不是有效的电子邮件格式' },
                            { max: 50, message: '长度不超过 50 个字符' }
                        ],
                        mobile: [
                            { type: 'string', pattern: /^1[3-9]\d{9}$/, message: '不是有效的手机号码' },
                            { max: 11, message: '长度不超过 11 个字符' }
                        ],
                    },
                    rulesOfPassword: {
                        old_password: [
                            { required: true, message: '请输入旧密码' },
                            { min: 3, max: 50, message: '长度在 3 - 50 个字符' },
                        ],
                        new_password: [
                            { required: true, message: '请输入新密码' },
                            { min: 3, max: 50, message: '长度在 3 - 50 个字符' },
                        ],
                        re_password: [
                            { required: true, message: '请输入重复密码' },
                            { min: 3, max: 50, message: '长度在 3 - 50 个字符' },
                        ],
                    },
                    dataOfUserInfo: {
                        data: {},
                        gender_data: [],
                    },
                    // 页面标题
                    title: "个人资料",
                    // 浏览器请求参数
                    dataOfQuery: {
                        total: 0,
                        page: 1,
                        pageSize: 10,
                        pageSizeList: [10, 20, 50, 100, 1000],
                        keyword: '',
                    },
                    // 数据加载状态
                    loadingState: {
                        refresh: false,
                        search: false,
                        paging: false,
                        list: false,
                    },
                    // 可视状态
                    visibleState: {
                        search: true,
                    },
                    // 查询数据
                    dataOfSearch: {
                        data: {},
                    },
                    // 表格数据
                    dataOfMain: [],
                    // 已勾选的表格行
                    dataOfCheckedRows: [],
                    dataOfCheckedKeys: [],
                };
            },
            methods: {

                handleClick(tab, event) {
                    console.log(tab, event);
                },

                onSubmit(formId) {
                    console.log(formId);
                    this.$refs[formId].validate(valid => {
                        if (!valid) {
                            return;
                        }
                        let params = {};
                        if (formId == 'formOfInfo') {
                            params = { ...this.formOfInfo }
                            params._mode = 'update';
                        } else {
                            params = { ...this.formOfPassword }
                            params._mode = 'password';
                            params.id = this.dataOfUserInfo.data.id;
                        }
                        params.unxxx='aaa';
                        this.vuiAjax.put(this.apiRoute.authAdminsUpdate, params)
                            .then(msgInfo => {
                                if (!msgInfo.success) {
                                    this.$message.error(msgInfo.message);
                                    return;
                                }
                                this.dataOfUserInfo = msgInfo.data;
                                this.formOfInfo = msgInfo.data.data;
                                this.$message.success('修改成功！');
                            }).catch(msgInfo => {
                                this.$message.error(msgInfo.message);
                            })
                    })
                },
                handleAvatarSuccess(res, file) {
                    console.log('handleAvatarSuccess', res, file);
                    this.imageUrl = URL.createObjectURL(file.raw);
                    let params = {
                        id: this.dataOfUserInfo.data.id,
                        avatar: res.data[0].path,
                        _mode: 'avatar',
                    }
                    this.vuiAjax.put(this.apiRoute.authAdminsUpdate, params)
                        .then(msgInfo => {
                            if (!msgInfo.success) {
                                this.$message.error(msgInfo.message);
                                return;
                            }
                        }).catch(msgInfo => {
                            this.$message.error(msgInfo.message);
                        })
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                // 加载列表数据
                loadData() {
                    this.loadingState.list = true;
                    // 查询参数
                    let queryParams = {
                        page: this.dataOfQuery.page,
                        page_size: this.dataOfQuery.pageSize,
                        search_text: this.dataOfQuery.keyword,
                        _success: true, // 通过传参 _success 来控制返回消息的成功状态。
                    };
                    queryParams = Object.assign(queryParams, this.dataOfSearch.data);
                    console.log('[加载数据列表] 查询参数= ', queryParams);

                    this.vuiAjax.get(this.apiRoute.authAdminsIndex, { params: queryParams })
                        .then(msgInfo => {
                            this.loadingState.refresh = this.loadingState.list = this.loadingState.search = this.loadingState.paging = false;
                            console.log("[加载数据列表] 返回结果= ", msgInfo);
                            if (!msgInfo.success) {
                                this.$message.error(msgInfo.message);
                                return;
                            }
                            this.dataOfMain = msgInfo.data.data;
                            this.dataOfQuery.total = msgInfo.data.total;
                        })
                        .catch(msgInfo => {
                            console.log("[加载数据列表] 返回异常= ", msgInfo);
                            this.loadingState.refresh = this.loadingState.list = this.loadingState.search = this.loadingState.paging = false;
                            this.$message.error(msgInfo.message);
                        });
                },
                // 表格行勾选事件
                onCheckTableRows(checkedRows) {
                    console.log("[表格行勾选事件] ", checkedRows);
                    this.dataOfCheckedRows = checkedRows;
                    this.dataOfCheckedKeys = checkedRows.map(item => item.id)
                },
                // 查询操作
                onSearch() {
                    this.loadingState.search = true;
                    this.loadData();
                },
                // 分页事件
                onPaging(type, val) {
                    this.loadingState.paging = true
                    console.log('[分页事件] ', type, val);
                    switch (type) {
                        case 'page':
                            this.dataOfQuery.page = val;
                            break;
                        case 'size':
                            this.dataOfQuery.page = 1;
                            this.dataOfQuery.pageSize = val;
                            break;
                        default:
                            break;
                    }
                    this.loadData();
                },
                loadUserInfo() {
                    // 加载用户信息
                    this.vuiAjax.get(this.apiRoute.authAdminsRead, { params: { id: 'me' } })
                        .then(msgInfo => {
                            if (!msgInfo.success) {
                                this.$message.error(msgInfo.message);
                                return;
                            }
                            this.dataOfUserInfo = msgInfo.data;
                            this.formOfInfo = msgInfo.data.data;
                        }).catch(msgInfo => {
                            this.$message.error(msgInfo.message);
                        })
                }
            },
            created() {
                this.loadData();
                this.loadUserInfo();
                this.activeTabName = EsUtils.getQueryString('tab', 'info')
            },
        };
        // 全局加载组件
        Vue.use(ElComponents);
        Vue.prototype.apiRoute = new ApiRoute();
        // 获取标准消息格式的 axios 实例
        Vue.prototype.vuiAjax = EsUtils.getStdAjax();
        // 创建应用实例
        var app = new Vue(App)
    </script>
</body>

</html>